<template>
  <div>
    <div id="mars3dcontent"></div>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { onMounted, onUnmounted, reactive } from "vue";
import { mapOptions, layers } from "@/utils/mapOptions";
import { destroyMap, flytoView } from "@/utils/Lmap";

let map;

let tileLayer = new mars3d.layer.ArcGisLayer({
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  enablePickFeatures: false,
  // queryParameters: {
  //   mosaicRule: `{"where":"t='20180525'"}`,
  // },
});

let xyztileList = [];
layers.cityModel.layers.forEach((el) => {
  xyztileList.push(new mars3d.layer.TilesetLayer(el));
});

onMounted(() => {
  map = new mars3d.Map("mars3dcontent");
  flytoView(map, mapOptions.scene.center);
  map.addLayer(tileLayer);
  xyztileList.forEach((el) => {
    map.addLayer(el);
  });
});

onUnmounted(() => {
  destroyMap(map);
});
</script>
